<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到诺奇集团</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font: 16px/20px microsft yahei;
    }
    .wrap {
      width: 100%;
      height: 400px;
      padding: 40px 0;
      position: fixed;
      top: 50%;
      margin-top: -200px;
      opacity: 0.8;
    }
    .container {
      width: 60%;
      margin: 0 auto;
    }
    .container h1 {
      text-align: center;
      color: #FFFFFF;
      font-weight: 500;
    }
    .container input {
      width: 320px;
      display: block;
      height: 36px;
      border: 0;
      outline: 0;
      padding: 6px 10px;
      line-height: 24px;
      margin: 32px auto;
      -webkit-transition: all 0s ease-in 0.1ms;
      -moz-transition: all 0s ease-in 0.1ms;
      transition: all 0s ease-in 0.1ms;
    }
    .container input[type="text"] , .container input[type="password"]  {
      background-color: #FFFFFF;
      font-size: 16px;
    }

    .container input[type='submit'] {
      font-size: 16px;
      letter-spacing: 2px;
      color: #666666;
      background-color: #FFFFFF;
    }
    .container input:focus {
      width: 400px;
    }
    .container input[type='submit']:hover {
      cursor: pointer;
      width: 400px;
    }

    .wrap ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
    }
    .wrap ul li {
      list-style-type: none;
      display: block;
      position: absolute;
      bottom: -120px;
      width: 15px;
      height: 15px;
      z-index: -8;
      background-color:rgba(255, 255, 255, 0.15);
      animotion: square 25s infinite;
      -webkit-animation: square 25s infinite;
    }
    .wrap ul li:nth-child(1) {
      left: 0;
      animation-duration: 10s;
      -moz-animation-duration: 10s;
      -o-animation-duration: 10s;
      -webkit-animation-duration: 10s;
    }
    .wrap ul li:nth-child(2) {
      width: 40px;
      height: 40px;
      left: 10%;
      animation-duration: 15s;
      -moz-animation-duration: 15s;
      -o-animation-duration: 15s;
      -webkit-animation-duration: 15s;
    }
    .wrap ul li:nth-child(3) {
      left: 20%;
      width: 25px;
      height: 25px;
      animation-duration: 12s;
      -moz-animation-duration: 12s;
      -o-animation-duration: 12s;
      -webkit-animation-duration: 12s;
    }
    .wrap ul li:nth-child(4) {
      width: 50px;
      height: 50px;
      left: 30%;
      -webkit-animation-delay: 3s;
      -moz-animation-delay: 3s;
      -o-animation-delay: 3s;
      animation-delay: 3s;
      animation-duration: 12s;
      -moz-animation-duration: 12s;
      -o-animation-duration: 12s;
      -webkit-animation-duration: 12s;
    }
    .wrap ul li:nth-child(5) {
      width: 60px;
      height: 60px;
      left: 40%;
      animation-duration: 10s;
      -moz-animation-duration: 10s;
      -o-animation-duration: 10s;
      -webkit-animation-duration: 10s;
    }
    .wrap ul li:nth-child(6) {
      width: 75px;
      height: 75px;
      left: 50%;
      -webkit-animation-delay: 7s;
      -moz-animation-delay: 7s;
      -o-animation-delay: 7s;
      animation-delay: 7s;
    }
    .wrap ul li:nth-child(7) {
      left: 60%;
      animation-duration: 8s;
      -moz-animation-duration: 8s;
      -o-animation-duration: 8s;
      -webkit-animation-duration: 8s;
    }
    .wrap ul li:nth-child(8) {
      width: 90px;
      height: 90px;
      left: 70%;
      -webkit-animation-delay: 4s;
      -moz-animation-delay: 4s;
      -o-animation-delay: 4s;
      animation-delay: 4s;
    }
    .wrap ul li:nth-child(9) {
      width: 100px;
      height: 100px;
      left: 80%;
      animation-duration: 20s;
      -moz-animation-duration: 20s;
      -o-animation-duration: 20s;
      -webkit-animation-duration: 20s;
    }
    .wrap ul li:nth-child(10) {
      width: 120px;
      height: 120px;
      left: 90%;
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      animation-delay: 6s;
      animation-duration: 30s;
      -moz-animation-duration: 30s;
      -o-animation-duration: 30s;
      -webkit-animation-duration: 30s;
    }

    @keyframes square {
      0%  {
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }
      100% {
        bottom: 400px;
        transform: rotate(600deg);
        -webit-transform: rotate(600deg);
        -webkit-transform: translateY(-500);
        transform: translateY(-500)
      }
    }
    @-webkit-keyframes square {
      0%  {
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }
      100% {
        bottom: 400px;
        transform: rotate(600deg);
        -webit-transform: rotate(600deg);
        -webkit-transform: translateY(-500);
        transform: translateY(-500)
      }
    }
  </style>

  <script src="static/js/jquery-3.1.1.min.js"></script>

  <script type="text/javascript">

    function login(){
      var username = $.trim($("#username").val());
      var password = $.trim($("#password").val());
      if(username == ""){
        alert("请输入用户名");
        return false;
      }else if(password == ""){
        alert("请输入密码");
        return false;
      }
      //ajax去服务器端校验
      var data= {username:username,password:password};

      $.ajax({
        type:"POST",
        url:'login',
        data:data,
        dataType:'json',
        success:function(data){
          if (data.code == 200 && data.extend.depts == 1){
            window.location.href ="student";

          }else if(data.code == 200 && data.extend.depts == 2){
            window.location.href ="teacher";
          }else if (data.code == 100){
            alert("登录失败");
          }
        }
      });
    };




  </script>

</head>
<body>
<img src="static/img/01.png" height="100%" width="100%"/>
<div class="wrap">
  <div class="container" >
    <h1>Welcome</h1>
    <form >
      <input   type="text"  placeholder="user login"   name="username"   id="username" />
      <span class="username_after"></span>
      <input  type="password" placeholder="password"  name="password"   id="password"/>
      <span class="password_after"></span>
      <input type="button" class="login_button" onclick="login()" value="Login"/>
    </form>
  </div>
</div>
</body>
</html>
